{% extends 'common/base.html' %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'mdeditor/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'mdeditor/css/editormd.preview.min.css' %}">
    <link rel="stylesheet" href="{% static 'mdeditor/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'datetimepicker/jquery.datetimepicker.css' %}">
{% endblock %}
{% block style %}
    <style>
        form {
            border: 30px solid #f3f3f3;
            text-align: left;
            font-family: '微软雅黑';
            padding: 10px;
        }

        form label {
            width: 140px;
            height: 34px;
            line-height: 34px;
            font-size: 18px;
            font-weight: 800;
            text-align: right;
        }

        form input {
            width: 400px;
            height: 34px;
            line-height: 34px;
        }
        #id_suggest {
            width: 800px;
        }

    </style>
{% endblock %}
{% block section %}
    <form class="" role="form" action="/project/" method="post">
        {% csrf_token %}
        <p><label for="id_suggest">对应建议:</label>
            <input name="suggest" required="" id="id_suggest" placeholder="输入标题/ID/申请人检索...">
        </p>
        <p><label for="id_in_charge">负责人:</label>
            <input name="in_charge" required="" id="id_in_charge" placeholder="输入名字全名检索...">
        </p>
        <p><label for="id_verify_user">验证人:</label>
            <input name="verify_user" id="id_verify_user" placeholder="输入名字全名检索...">
        </p>
        {{ obj.as_p }}
        <input type="submit" value="提交" style="width:140px;height:40px;background:#a9e25c;">

    </form>
{% endblock %}
{% block script %}
    <script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
    <scrippt src="{% static 'datetimepicker/build/jquery.datetimepicker.full.min.js' %}"></scrippt>
    <script src="{% static 'datetimepicker/build/jquery.datetimepicker.min.js' %}"></script>
    <script>
        $(function () {
            $('#id_estimate_at,#id_finish_at').datetimepicker({
                timepicker: false,
                format: 'Y-m-d'
            });

            var in_charge = $('#id_in_charge');
            var
            var
            optionlist = $('.option-list');
            in_charge.on('input', function (value) {
                $.ajax({
                    url: '/searchUser/',
                    method: 'get',
                    data: {
                        keyword: $(this).val()
                    },
                    success: function (data) {
                        optionlist.empty();
                        optionlist.css('display', 'block');
                        users = JSON.parse(data);
                        for (var i = 0; i < users.length; i++) {
                            var username = users[i].fields.username
                            var li = $('<li>' + username + '</li>')
                            optionlist.append(li)
                        }
                    }
                })
            });
            $('.option-list').on('click', function (e) {
                var select_username = e.target.innerText
                in_charge.val(select_username)
                optionlist.hide()
            });
        })
    </script>
{% endblock %}